@tailwind base;
@tailwind components;
@tailwind utilities;

::-webkit-scrollbar {
  width: 0.625rem;
  height: 0.625rem;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  @apply transition-all ease-out duration-200;

  border: 1px solid var(--app-scrollbar-color);
  background: transparent;
}

::-webkit-scrollbar-thumb:hover {
  border: 1px solid var(--app-scrollbar-color-hover);
}

::selection {
  @apply bg-primary-main-4/[0.25];
}

html,
body {
  scrollbar-width: auto;
  scrollbar-color: var(--app-scrollbar-color) transparent;
}

a[href]:focus,
button:not(:disabled):focus {
  @apply outline-dotted outline-secondary-main-3/50;
}
